<template>
    <div id="userDetail">
        <!-- 这是个人信息 -->
    <el-container>
        <el-header><Header></Header></el-header>
        <el-main>
            <div class="personal">
                <div class="personal_title">
                    <p><span>{{$t("personalDetails.personal")}}</span></p>
                </div>
                <div class="personal_content">
                    
                    <table class="personal_table">
                        <tr>
                            <td>{{$t("personalDetails.headPortrait")}}：</td>
                            <td>
                                <!-- disabled 禁止输入 -->
                                <!-- 头像上传 -->
                                <div class="upload">
                                    <el-upload
                                    disabled
                                    class="avatar-uploader"
                                    action="https://api.shop.uekea.com/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>{{$t("personalDetails.userName")}}：</td>
                            <td><input type="text" :value="userInfo.realname" disabled></td>
                        </tr>
                        <tr>
                            <td>{{$t("personalDetails.phone")}}：</td>
                            <td>{{userInfo.mobile}}</td>
                        </tr>
                        <tr>
                            <td>{{$t("personalDetails.name")}}：</td>
                            <td><input type="text" :value="userInfo.nickname" disabled></td>
                        </tr>
                        <tr>
                            <td>{{$t("personalDetails.WechatID")}}：</td>
                            <td><input type="text" :value="userInfo.weixin" disabled></td>
                        </tr>
                        <tr>
                            <td>{{$t("personalDetails.date")}}：</td>
                            <td>
                                <div class="block">
                                    <el-date-picker
                                    :disabled="true"
                                    v-model="TimeValue"
                                    :clearable='false'
                                    type="date"
                                    placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>{{$t("personalDetails.address")}}：</td>
                            <td @click="address">{{userInfo.province}} {{userInfo.city}}</td>
                        </tr>
                    </table>
                </div>
                <!-- 地址修改弹框 -->
                <el-dialog
                title="修改地址"
                :visible.sync="changeAddress"
                width="30%"
                @close="close"
                center>
                    <!-- 地区选择器 -->
                    <v-distpicker :province="province" :city="city" hide-area @selected="selected"></v-distpicker>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="changeAddress = false">取 消</el-button>
                        <el-button type="primary" @click="modify">修 改</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-main>
        <el-footer><Footer></Footer></el-footer>
    </el-container>
    </div>
</template>

<script>
import VDistpicker from 'v-distpicker';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
    data () {
        return {
            userInfo:{
                nickname: "",       // 名称
                headimgurl: "",       // 头像
                mobile: "",           // 手机号
                weixin: "",           // 微信号
                province: "",       // 省
                city: ""           // 市
            },    //个人信息
            imageUrl: "",       // 头像
            TimeValue: "",      // 选择出生日期
            province: '省',       // 省
            city: '市',       // 市
            changeAddress: false,     // 地址修改弹框
            placeholders: {
                province: '省',       // 省
                city: '市',       // 市
            },
        }
    },
    components: {
        Header,
        Footer,
        VDistpicker
    },
    methods: {
        handleAvatarSuccess(file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;     // 限制上传图片大小10M
            const isJPG = file.type === 'image/jpg';
            const isPNG = file.type === 'image/png';
            const isJPEG = file.type === 'image/jpeg';
            let bool = false;
            if(!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            if (!isJPG && !isPNG && !isJPEG) {
                this.$MessageAlert(true,'上传头像图片只能是 JPG、PNG、JPEG 格式!','error');
                bool = false;
            } else {
                bool = true;
            }
            return bool && isLt10M;
        },
        // 地区选择
        selected(data) {
            this.placeholders.province = data.province.value;
            this.placeholders.city = data.city.value;
        },
        // 打开修改地址弹框
        address() {
            this.changeAddress = false;
            // this.changeAddress = true;          // 打开弹框
            // this.province = this.userInfo.province;
            // this.city = this.userInfo.city;
        },
        // 地址修改弹框，确认修改按钮
        modify() {
            this.userInfo.province = this.placeholders.province;
            this.userInfo.city = this.placeholders.city;
            this.changeAddress = false;
        },
        // 弹框关闭回调
        close() {
            this.placeholders.province = "";
            this.placeholders.city = "";
            this.province = "";
            this.city = "";
        },
    },
    created() {
        var _this = this;
        let id =  _this.$Cookie.getCookie("userID");
        if(_this.$Cookie.getCookie("token") != undefined) {
            _this.$get(`user/info/${id}`).then(res => {
                if(res.code == 200) {
                    _this.userInfo = res.data;
                    _this.userInfo.province = res.data.province + "省";
                    _this.userInfo.city = res.data.city + "市";
                    _this.imageUrl = res.data.avatar;
                    _this.TimeValue = res.data.birthyear + "-" + res.data.birthmonth + "-" + res.data.birthday;
                }
            })
        } else {
            // 没token值
            _this.$MessageAlert(true,_this.$t('share.Message.login'),'error');
            _this.$router.push({"path":'/'});
        }
    },
}
</script>

<style lang="less" scoped>
// 布局容器
.el-header {
    font-size: 0;
}
.el-header, .el-footer {
    color: #333;
    text-align: center;
    height: auto!important;
    padding: 0px;
}
.el-main {
    color: #333;    
    padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
    min-height: calc(100vh - 61px - 220px)
}
.el-aside {
    color: #333;
    text-align: center;
}
// 布局容器结束
#userDetail {
    min-width: 650px;
}
.personal {
    width: 600px;
    margin: auto;
    padding: 40px;
    .personal_title {
        span {
            display: inline-block;
            padding-bottom: 5px;
            border-bottom: 2px solid #e2231a;
            color: #999;
        }
    }
    .personal_content{
        margin-top: 40px;
        .personal_table {
            font-size: 15px;
            td:nth-child(1) {
                text-align: right;
                padding-right: 10px;
                height: 50px;
            }
            td:nth-child(2) {
                padding-left: 25px;
                font-size: 16px;
                .block {
                    .el-input__prefix {
                        text-indent: 0px;
                    }
                }
            }
            input {
                background-color: white;
            }
        }
    }
}
/deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader {
    text-align: center;
}
// .avatar-uploader .el-upload:hover {
//     border-color: #409EFF;
// }
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}
.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
/deep/ .el-upload__input {
    display: none;
}
// 地区选择器
/deep/ .distpicker-address-wrapper select {
    font-size: 1.3rem;
}
// /deep/ .avatar-uploader-icon {
//     border: 1px dashed red;
// }
</style>